<template>
  <DialogSubmitForm ref="form" v-bind="formFrame">
    <Page ref="page" :search-config="searchConfig" :table-config="tableConfig" />
  </DialogSubmitForm>
</template>
<script setup lang="ts">
import {
  MDialogSubmitForm as DialogSubmitForm,
  type DialogSubmitFormInstance,
  type DialogSubmitFormProps
} from "page-com";
import { getProductPageList } from "@/api/product/productApi";
import { MPage as Page } from "page-com";
import { PageSearchConfig, PageTableConfig, ToolbarConfig, type PageInstance } from "page-com";
import { reactive, shallowReactive, useTemplateRef } from "vue";
import { getBrandSelect } from "@/api/product/brandApi";
const page = useTemplateRef<PageInstance>("page");
const form = useTemplateRef<DialogSubmitFormInstance>("form");
const formFrame = shallowReactive<Partial<DialogSubmitFormProps>>({
  submitFun: async function (data) {
    emit("saveSuccess", page.value.getCurrentRow());
    form.value.hide();
  },
  width: "800px",
  title: "选择商品",
  submitButtonName: "确定"
});
const searchConfig = shallowReactive<PageSearchConfig>({
  pageSearchFrame: [
    {
      frameType: "input",
      key: "productName",
      label: "商品名称"
    },
    {
      frameType: "input",
      key: "brandId",
      label: "品牌id",
      options: getBrandSelect().then(v => v.data)
    }
  ],
  searchFun: getProductPageList
});
const tableConfig = reactive<PageTableConfig>({
  pageTableFrame: [
    {
      key: "productName",
      label: "商品名称"
    },
    {
      key: "productDesc",
      label: "商品描述"
    },
    {
      key: "brandName",
      label: "品牌"
    },
    {
      key: "categoryName",
      label: "分类",
      render: (data: any) => {
        return data.join("\n");
      }
    }
  ]
});
function show() {
  form.value.show();
}

defineExpose({ show });
const emit = defineEmits<{
  saveSuccess: [data: ShopProductVo];
}>();
</script>
